<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 文本插值 -->
        {{ message1 }}
        <br>
        <!-- v-bind -->
        <!--title 属性:鼠标移到元素上时显示一段工具提示文本（tooltip text）。  -->
        <span v-bind:title="message2">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <!-- v-if -->
        <!--
            v-if是动态的向DOM树内添加或者删除DOM元素；
            v-show是通过设置DOM元素的display样式属性控制显隐
            使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。
            v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏 -->
        <div id="app-3">
            <p style="height: 100px;width: 100px;background-color: antiquewhite;" v-if="seen"> v-if</p>
            <p style="height: 100px;width: 100px;background-color:paleturquoise;" v-show="seen"> v-show</p>
            <!-- 补充：我被骗了，v-if&v-show和 visibility属性没有半毛钱关系-->
            <p style="height: 100px;width: 150px;background-color:palevioletred;visibility:visible "> visibility:visible
            </p>
            <p style="height: 100px;width: 150px;background-color:palevioletred;visibility:hidden "> visibility:hidden;
            </p>
            <!-- display: none;在dom树上存在，但不占据页面的位置 -->
            <!-- visibility:hidden;在dom上存在，且占据页面位置-->
            <button v-on:click="seen= !seen">
                Toggle
            </button>
        </div>
        <!-- v-for -->
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
        <!-- v-on -->
        {{ message3 }}
        <button v-on:click="reverseMessage">反转消息</button>
        <!-- v-model -->
        <div id="app-6">
            <p>{{ message4 }}</p>
            <input v-model="message4">
        </div>
        <!-- 组件 -->
        <div id="app-7">
            <ol>
                <!--
                现在我们为每个 todo-item 提供 todo 对象
                todo 对象是变量，即其内容可以是动态的。
                我们也需要为每个组件提供一个“key”，稍后再
                作详细解释。
              -->
                <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
            </ol>
        </div>
        <!-- v-html -->
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        <!--对于布尔 attribute (它们只要存在就意味着值为 true)  -->
        <button v-bind:id="false">Button</button>
        <button v-bind:id="!false">Button</button>
        <!-- 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。 -->
        <div v-bind:id="'list-' + id">JavaScript 表达式</div>
        <!-- 动态参数 -->
        <!-- 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写： -->
        <a v-bind:[attributename]='url'> ... </a>
        <a v-on:[eventname]="doSomething" href="#"> ... </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 数据和dom通过vue实例创建了关联 -->
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message1: 'Hello Vue!',
                    message2: '页面加载于 ' + new Date().toLocaleString(),
                    message3: 'Hello Vue!',
                    message4: 'Hello Vue!',
                    seen: false,
                    todos: [
                        { text: '学习 JavaScript' },
                        { text: '学习 Vue' },
                        { text: '整个牛项目' }],
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '随便其它什么人吃的东西' }
                    ],
                    rawHtml: `<span style="color:red">This should be red{{ message1}}</span>`,
                    id: '123',
                    attributename: "href",
                    url: 'https://cn.vuejs.org/v2/guide/syntax.html',
                    eventname: "focus"
                }
            },
            methods: {
                reverseMessage: function () {
                    this.message3 = this.message3.split('').reverse().join('')
                    //split() 方法用于把一个字符串分割成字符串数组
                    // join() 方法用于把数组中的所有元素放入一个字符串。
                },
                doSomething() {
                    console.log('doSomething');
                }
            }
        })

    </script>
</body>

</html>